<template>
  <div>
    <el-form-item label="添加自定义内容" class="block-line form-content-type">
      <el-col :span="12">
        <el-button @click="addContent('text')"><i class="icon icon-danxingwenbenicon1"></i>单行文本</el-button>
        <el-button @click="addContent('radio')"><i class="icon icon-danxuananniu-copy"></i>单项选择</el-button>
        <el-button @click="addContent('select')"><i class="icon icon-xialakuang1"></i>下拉框&nbsp;&nbsp;&nbsp;&nbsp;</el-button>
        <!-- <el-button @click="addContent('pay', {name: 'otherPay', label: '他人代付', pic: [], payBtnInd: payLenNum, options:[[]], payObj: {
          ticket: '',
          ticketName: '',
          payVal: '',
          payEnd: 2,
          payToUrl: ''
        }})"><i class="icon icon-zhifu"></i>他人代付</el-button> -->
      </el-col>
      <el-col :span="12">
        <el-button @click="addContent('textarea')"><i class="icon icon-duoxingwenbenicon1"></i>多行文本</el-button>
        <el-button @click="addContent('checkbox')"><i class="icon icon-duoxiangxuanze"></i>多项选择</el-button>
        <el-button @click="addContent('pay', {name: 'wxPay', label: '微信支付', pic: [], payBtnInd: payLenNum, options: [[]], payObj: {
          ticket: '',
          cardTemplateId: '',
          ticketName: '',
          payVal: '',
          payEnd: 1,
          payToUrl: ''
        }})"><i class="icon icon-zhifu"></i>微信支付</el-button>
        <!-- <el-button @click="addContent('upload')"><i class="icon icon-shangchuantupian"></i>上传图片</el-button> -->
      </el-col>
    </el-form-item>
    <el-form-item label="添加字段：" class="block-line form-content-type">
      <el-col :span="12" v-for="(item, n) in fieldList" :key="item.key">
        <el-button @click="addContent(item.type, {ind: n, name: item.key, label: item.label, pic: [], options:item.options})">{{item.label}}</el-button>
      </el-col>
    </el-form-item>
  </div>
</template>
<script>
  import {mapState, mapActions, mapMutations} from 'vuex'
  export default {
    data () {
      return {
        fieldList: [
          {key: 'name', label: '姓名', pic: [], type: 'text'},
          {key: 'mobile', label: '手机号码', pic: [], type: 'text', vcodeShow: false},
          {key: 'birthday', label: '生日', pic: [], type: 'date'},
          // {key: 'country', label: '国家', pic: [], type: 'select', options: [{val: '1', label: '中国'}, {val: '2', label: '英国'}]},
          {key: 'area', label: '省/市/区', pic: [], type: 'select', options: [[{val: '', label: '请选择您所在省份'}], [{val: '', label: '请选择您所在城市'}], [{val: '', label: '请选择您所在区县'}]]},
          // {key: 'city', label: '城市', pic: [], type: 'select', options: [{val: 1, label: '请选择您所在城市'}]},
          {key: 'mail', label: '邮箱', pic: [], type: 'text'},
          {key: 'familyAddress', label: '家庭地址', pic: [], type: 'text'},
          {key: 'company', label: '公司', pic: [], type: 'text'},
          {key: 'wechat', label: '微信号', pic: [], type: 'text'},
          {key: 'sex', label: '性别', pic: [], type: 'radio', options: [[{val: '1', label: '男'}, {val: '2', label: '女'}]]},
          {key: 'tel', label: '座机', pic: [], type: 'text'},
          // {key: 'district', label: '区县', pic: [], type: 'text'},
          {key: 'qq', label: 'QQ', pic: [], type: 'text'},
          {key: 'companyAddress', label: '公司地址', pic: [], type: 'text'},
          {key: 'position', label: '职位', pic: [], type: 'text'},
          {key: 'upload', label: '图片上传', pic: [], type: 'file'}
          // ,
          // {key: 'wxPay', label: '微信支付', pic: [], type: 'pay'},
          // {key: 'otherPay', label: '他人代付', pic: [], type: 'pay'}
        ],
        addFields: [],
        payLenNum: 2
      }
    },
    mounted () {
      // this.initFieldList()
      this.payLenNum = this.payData.length
    },
    props: ['content'],
    watch: {
      'content': function (now) {
        this.setContent(now)
      }
    },
    computed: {
      ...mapState({
        formHtmlMap: state => state.contentManage.formHtmlMap,
        payData: state => state.contentManage.payData
      })
    },
    methods: {
      ...mapActions(['']),
      ...mapMutations(['SET_FORM_HTML_MAP', 'SET_PAY_DATA']),
      // 添加内容
      addContent (type, obj) {
        this.payLenNum = this.payData.length
        if (this.payLenNum > 0 && type === 'pay') {
          this.$message.warning('只能添加一个微信支付按钮')
          return
        }
        let addObj = null
        switch (type) {
          case 'text':
            addObj = {
            name: obj ? obj.name : 'defined',
            label: obj ? obj.label : '自定义单行文本',
            required: obj && ['mobile', 'name'].indexOf(obj.name) > -1,
            type: type,
            pic: [],
            addFieldInd: obj ? this.addFields.length : undefined,
            options: []}; break
          case 'textarea': addObj = {
            name: obj ? obj.name : 'defined',
            label: obj ? obj.label : '自定义多行文本',
            required: false,
            type: type,
            pic: [],
            addFieldInd: obj ? this.addFields.length : undefined,
            options: []}; break
          case 'radio': addObj = {
            name: obj ? obj.name : 'defined',
            label: obj ? obj.label : '自定义单项选择',
            required: false,
            type: type,
            pic: [],
            addFieldInd: obj ? this.addFields.length : undefined,
            options: obj ? obj.options : [[{val: '1', label: '选项一'}, {val: '2', label: '选项二'}]]}; break
          case 'checkbox': addObj = {
            name: obj ? obj.name : 'defined',
            label: obj ? obj.label : '自定义多项选择',
            required: false,
            type: type,
            pic: [],
            addFieldInd: obj ? this.addFields.length : undefined,
            options: obj ? obj.options : [[{val: '1', label: '选项一'}, {val: '2', label: '选项二'}]]}; break
          case 'select': addObj = {
            name: obj ? obj.name : 'defined',
            label: obj ? obj.label : '自定义下拉框',
            required: false,
            type: type,
            pic: [],
            addFieldInd: obj ? this.addFields.length : undefined,
            options: obj ? obj.options : [[{val: '1', label: '选项一'}, {val: '2', label: '选项二'}]]}; break
          case 'pay': addObj = {
            name: obj ? obj.name : 'wxPay',
            label: obj ? obj.label : '微信支付',
            required: false,
            type: type,
            pic: [],
            addFieldInd: undefined,
            payBtnInd: this.payLenNum,
            payObj: obj ? obj.payObj : {
              ticket: '',
              cardTemplateId: '',
              ticketName: '',
              payVal: '',
              payEnd: 1,
              payToUrl: ''
            },
            options: obj ? obj.options : [[]]}; break
          default: addObj = {
            name: obj ? obj.name : 'defined',
            label: obj ? obj.label : '上传图片',
            required: false,
            type: type,
            pic: [],
            addFieldInd: obj ? this.addFields.length : undefined,
            options: []
          }
        }
        // if (addObj.name === 'mobile') {
        //   addObj.vcodeShow = true
        // }
        this.formHtmlMap.push(addObj)
        this.SET_FORM_HTML_MAP(this.formHtmlMap)
        if (obj && type !== 'pay') {
          let addItem = this.fieldList.splice(obj.ind, 1)
          this.addFields.push(addItem[0])
        }
        if (type === 'pay') {
          this.payLenNum++
          this.payData.push({
            ticket: '',
            ticketName: '',
            payVal: '',
            payEnd: 1,
            payToUrl: ''
          })
          this.$emit('setPayBtnTxt')
          this.SET_PAY_DATA(this.payData)
        }
      },
      // 初始化fieldList
      initFieldList () {
        let me = this
        me.formHtmlMap.map(elem => {
          for (let i = 0, len = me.fieldList.length; i < len; i++) {
            if (elem.label === me.fieldList[i].label) {
              me.addFields.push(me.fieldList.splice(i, 1)[0])
              break
            }
          }
        })
      },
      // 删除字段内容
      delFieldCont (id) {
        if (id !== undefined) {
          let addItem = this.addFields.splice(id, 1)
          this.fieldList.push(addItem[0])
        }
      }
    }
  }
</script>
<style lang="scss">
  .form-content{
    &-type{
      .el-button{
        width: 90%;
        margin: 0 0 10px 12px;
      }
      .icon{
        margin-right: 6px;
      }
    }
  }
</style>
